<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1{
            width:100px;
            height:100px;
            background-image(./img/stlogo1.png);
            background-size:cover;
            /*开启绝对定位*/
            position:absolute;
        }
        .logo{
            width:100px;
            height:100px;
        }
    </style>
    <script>
        window.onload = function(){
            // 完成div跟随鼠标移动

            // 获取div
            var box1 = document.getElementById("box1");

            // 绑定鼠标移动事件
            document.onmousemove = function(event){
                // 解决兼容问题
                event = event ||window.event;
                //获取滚动条滚动的距离
                /*
                 * chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
                 * 火狐等浏览器认为浏览器的滚动条是html的，
                 */
                var st = document.body.scrollTop || document.documentElement.scrollTop;
                var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
                //var st = document.documentElement.scrollTop;


                //获取到鼠标的坐标
                /*
                 * clientX和clientY
                 * 	用于获取鼠标在当前的可见窗口的坐标
                 * div的偏移量，是相对于整个页面的
                 *
                 * pageX和pageY可以获取鼠标相对于当前页面的坐标
                 * 	但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用
                 */
                var left = event.clientX;
                var　top = event.clientY;

                //设置div的偏移量
                box1.style.left = left + sl + "px";
                box1.style.top = top + st -15 + "px";


            }

        }
    </script>
</head>
<body style="height: 1000px;width: 2000px;">
      <div id="box1">
           <img src=img/stlogo1.png class="logo" >
      </div>
</body>
</html>